<template>
    <view class="address-edit">
        <text>收货地址</text>
        <view class="form-container">
            <u-form labelPosition="left" labelWidth="70" :model="formData" :rules="rules" ref="uFormRef">
                <u-form-item label="姓名" borderBottom prop="name">
                    <u-input border="none" placeholder="请输入收货人姓名" v-model="formData.name"></u-input>
                </u-form-item>
                <u-form-item label="电话" borderBottom prop="mobile">
                    <u-input border="none" placeholder="请输入收货人手机号" v-model="formData.mobile"></u-input>
                </u-form-item>
                <u-form-item label="区域" borderBottom @click="show=true" prop="provinceName">
                    <view v-if="!formData.provinceName">请选择省/市/区</view>
                    <view v-else>{{formData.provinceName}}/{{formData.cityName}}/{{formData.districtName}}</view>
                    <sp-area-picker v-model="show" @confirm="handleConfirm"></sp-area-picker>
                </u-form-item>
                <u-form-item label="详细地址" borderBottom prop="fullAddress">
                    <u-input border="none" placeholder="街道门牌,楼层等信息" v-model="formData.fullAddress"></u-input>
                </u-form-item>
                <u-form-item label="是否默认" borderBottom>
                    <u-switch v-model="formData.isDefault" activeColor="#ff0000"></u-switch>
                </u-form-item>
            </u-form>
        </view>
        <view class="footer">
            <view class="add-button" @click="handelSubmit()">保存</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { post, get } from "@/libs/request"
import { red } from "@/libs/utils"
import { onLoad } from "@dcloudio/uni-app";
const uFormRef = ref<any>(null);
const show = ref<boolean>();
const formData = ref<{
    addressId:number,
    provinceId:number,
    provinceName:String,
    cityId:number,
    cityName:String,
    districtId:number,
    districtName:String,
    name:String,
    mobile:String,
    fullAddress:String,
    isDefault:boolean,
}>({
    addressId:0,
    provinceId:0,
    provinceName:"",
    cityId:0,
    cityName:"",
    districtId:0,
    districtName:"",
    name:"",
    mobile:"",
    fullAddress:"",
    isDefault:false,
});
const rules = ref<any>({
    name: {  
      type: 'string',  
      required: true,  
      message: '请填写姓名',  
      trigger: ['blur', 'change'],  
    },  
    mobile: {  
      type: 'string',  
      required: true,  
      len: 11,
      message: '请填写手机号',  
      trigger: ['blur', 'change'],  
    },  
    provinceName: {  
      type: 'string',  
      required: true,  
      message: '请选择地址省市区',  
      trigger: ['blur', 'change'],  
    },  
    fullAddress: {  
      type: 'string',  
      required: true,  
      message: '请填写详细地址',  
      trigger: ['blur', 'change'],  
    }
});
/**
 * 选中区域
 * @param e 
 */
const handleConfirm = (e:any)=>{
    const { items } = e;
    formData.value.provinceId = items[0].areaId;
    formData.value.provinceName = items[0].areaName;
    formData.value.cityId = items[1].areaId;
    formData.value.cityName = items[1].areaName;
    formData.value.districtId = items[2].areaId;
    formData.value.districtName = items[2].areaName;
}
const handelSubmit = ()=>{
    uFormRef.value.validate().then((valid)=>{
        if (valid) {  
            post("userAddress/edit",{},formData.value).then((res:any)=>{
                if(res.errCode==0){
                    uni.showToast({
                        title: "更新成功",
                        icon: "success",
                        duration: 2000
                    });
                    setTimeout(()=>{
                        red("/subpackage/order/pages/address/index");
                    },1000)
                }
            })  
        }  
    }).catch(() => {  
        console.log("校验失败");
    });  
}
/**
 * 获取详情
 */
const getDetail = ()=>{
    get(`userAddress/detail/${formData.value.addressId}`).then((res:any)=>{
        if(res.errCode==0){
            formData.value = res.data;
        }
    })  
}
onLoad((params: any)=>{
    formData.value.addressId = Number(params.id);
    getDetail();
})
</script>
<style scoped lang="less">
.address-edit{
    height: 100vh;
    background: #f7f7f7;
    overflow: auto;
    padding: 20rpx;
    text{
        color: #999;
        font-size: 24rpx;
    }
    .form-container{
        margin-top: 20rpx;
        padding: 20rpx;
        border-radius: 25rpx;
        background-color: #FFFFFF;
    }
    .footer{
        margin-top: 40rpx;
        width: 100%;
        display: flex;
        justify-content: center;
        .add-button{
            width: 90%;
            height: 90rpx;
            line-height: 90rpx;
            background: linear-gradient(90deg, rgb(254, 96, 53), rgb(239, 18, 36));
            color: #FFFFFF;
            text-align: center;
            border-radius: 50rpx;
        }
    }
}
</style>